<template>
	<view class="">
		<view class="title">滑动菜单，自动计算滑块宽度，自动居中</view>
		<view class="menu">
			<zhTabs :list='list' :current.sync='current' bgColor='#EBEBEB' round='50' height='60'
				:activeStyle="{color:'#fff'}" @click="clickZhTabs()"></zhTabs>
		</view>
	</view>
</template>

<script>
	import zhTabs from '@/components/zh-Tabs/zhTabs/zhTabs.vue'
	export default {
		components: {
			zhTabs
		},
		data() {
			return {
				list: [{
						id: 1,
						name: '苹果'
					},
					{
						id: 2,
						name: '香蕉'
					},
					{
						id: 3,
						name: '西瓜'
					},
					{
						id: 4,
						name: '菠萝'
					},
					{
						id: 5,
						name: '石榴'
					},
					{
						id: 6,
						name: '榴莲'
					},
					{
						id: 7,
						name: '香橙'
					},
					{
						id: 8,
						name: '黄桃'
					},
				],
				current: 0,
			}
		},
		methods: {
			clickZhTabs(e) { //点击zhTabs
				console.log(e);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.title {
		margin-top: 40upx;
		color: #909090;
		font-size: 30rpx;
		text-align: center;
	}

	.menu {
		margin-top: 40upx;
		padding: 0 28upx;
	}
</style>